<!--
 * @Author: TT-hzy
 * @Date: 2024-07-31 10:09:08
 * @LastEditors: TT-hzy
 * @LastEditTime: 2024-07-31 15:11:39
-->

<template>
  <div class="down-bg">
    <img
      src="https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/logo-0921b993.svg"
      alt="logo"
      class="logo"
    />
    <span class="slogan">抖音官方出品音乐APP</span>

    <a class="down-btn"
      ><img
        src="https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/apple-icon-bf99c685.svg"
        alt="下载汽水音乐Mac版"
      />
      下载汽水音乐Mac版</a
    >

    <div class="other-bg mt-16">
      <div class="down-btn other-btn android">
        <img
          src="https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/android-icon-8480e489.svg"
        />
        Android
      </div>
      <div class="down-btn other-btn ios">
        <img
          src="https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/apple-icon-bf99c685.svg"
          alt="下载汽水音乐iOS版"
          class="ios-icon"
          style="width: 16px; height: 20px"
        />
        iOS
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.down-bg {
  width: 400px;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.logo {
  width: 305px;
}

.slogan {
  color: #ffffff80;
  font-size: 18px;
  letter-spacing: 10px;
  margin-top: 16px;
  margin-left: 16px;
  margin-bottom: 30px;
}
.down-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: #ffffffd9;
  color: #121212;
  font-size: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.down-btn:hover {
  background-color: #fff;
  opacity: 1;
}

.other-bg {
  gap: 16px;
  display: flex;
}
.other-btn {
  cursor: default;
}

.other-btn:hover {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.other-btn:hover::before {
  content: '';
  width: 100%;
  height: 152px;
  opacity: 1;
  background-color: #fff;
  border-radius: 0 0 9px 9px;
  top: 48px;
  position: absolute;
  backdrop-filter: blur(10px);
}
.other-btn:hover::after {
  content: '';
  width: 120px;
  height: 120px;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%);
}

.android:hover::after {
  background-image: url(https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/qrcode-android-a747ef6f.svg);
}

.ios:hover::after {
  background-image: url(https://lf-cdn-tos.bytescm.com/obj/static/luna/home/1.0.0.184/assets/qrcode-android-a747ef6f.svg);
}
</style>
